.cube-bloc{
    width:150px;
    height:150px;
    border: black solid 5px ;
    border-radius: 0px;
    float:left;
    opacity: 1;
    font-size: 40px;
    font-weight: bolder;
    transform-style: preserve-3d;
    color:black;
}
.container{
    width:300px;
    height:300px;
    margin:120px auto;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.box{
    transform-style: preserve-3d;
    position:relative;
}
.content{
    width:300px;
    height:300px;
    transform-style: preserve-3d;
}
.surface{
    width:300px;
    height:300px;
    position: absolute;
    text-align: center;
    /*background-color: black;*/
    transform-style: preserve-3d;
    border-radius:8px;
}
.center-face{
    transform-style: preserve-3d;
    /*background-color: black;*/
}
.x-f{
    transform: rotateY(90deg);
}
.y-f{
    transform: rotateX(90deg);
}
.z-f{
    transform: rotateZ(0deg);
}
